<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的自我介绍</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: "Comic Sans MS", "Microsoft YaHei", sans-serif;
        }
        body {
            background-color: #E6F7FF;
            color: #333;
            line-height: 1.6;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
        }
        .header {
            text-align: center;
            padding: 30px 0;
            position: relative;
            overflow: hidden;
        }
        .header h1 {
            font-size: 2.5rem;
            color: #64B5F6;
            margin-bottom: 10px;
            animation: bounce 1s ease-in-out;
        }
        .header p {
            font-size: 1.2rem;
            color: #666;
            animation: fadeIn 1.5s ease-in-out;
        }
        .avatar {
            width: 160px;
            height: 160px;
            border-radius: 50%;
            border: 5px solid #90CAF9;
            margin: 0 auto 20px;
            display: block;
            object-fit: cover;
            transition: transform 0.3s ease;
        }
        .avatar:hover {
            transform: scale(1.05) rotate(5deg);
        }
        .card {
            background-color: white;
            border-radius: 15px;
            padding: 25px;
            margin-bottom: 25px;
            box-shadow: 0 5px 15px rgba(100, 181, 246, 0.1);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(100, 181, 246, 0.15);
        }
        .card h2 {
            font-size: 1.5rem;
            color: #64B5F6;
            margin-bottom: 15px;
            border-left: 4px solid #64B5F6;
            padding-left: 10px;
        }
        .card ul {
            list-style-position: inside;
            padding-left: 10px;
        }
        .card li {
            margin-bottom: 8px;
            font-size: 1.1rem;
        }
        .tags {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 15px;
        }
        .tag {
            background-color: #E6F7FF;
            color: #64b5f6;
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 1rem;
            transition: all 0.2s ease;
        }
        .tag:hover {
            background-color: #1976D2;
            color: white;
            transform: scale(1.05);
        }
        .footer {
            text-align: center;
            padding: 20px 0;
            color: #888;
            font-size: 1rem;
            border-top: 1px solid #E3F2FD;
            margin-top: 30px;
        }
        .copyright {
            font-size: 0.9rem;
            color: #999;
            margin-top: 10px;
        }
        @keyframes bounce {
            0% { transform: translateY(-30px); opacity: 0; }
            70% { transform: translateY(10px); }
            100% { transform: translateY(0); opacity: 1; }
        }
        @keyframes fadeIn {
            0% { opacity: 0; }
            100% { opacity: 1; }
        }
        @media (max-width: 600px) {
            .header h1 {
                font-size: 2rem;
            }
            .card {
                padding: 20px;
            }
            .avatar {
                width: 120px;
                height: 120px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>大家好，我是王曦!</h1>
            <p>一名充满活力的初二学生 | 热爱生活，乐于探索</p>
        </div>
        <div class="card">
            <h2>关于我</h2>
            <ul>
                <li>姓名：王曦</li>
                <li>年龄：13岁</li>
                <li>班级：初二（4）班</li>
            </ul>
        </div>
        <div class="card">
            <h2>我的兴趣爱好</h2>
            <div class="tags">
                <span class="tag">编程</span>
                <span class="tag">阅读</span>
                <span class="tag">听音乐</span>
            </div>
        </div>
        <div class="card">
            <h2>我的特长</h2>
            <h3>基本会～</h3>
            <ul>
                <li>c++</li>
                <li>python</li>
            </ul>
            <h3>会一点～</h3>
            <ul>
                <li>html</li>
            </ul>
        </div>
        <div class="card">
            <h2>学习与目标</h2>
            <h3>我喜欢的学科：</h3>
            <ul>
                <li>数学</li>
                <li>英语</li>
            </ul>
            <h3>初中目标：</h3>
            <ul>
                <li>1. 保持班级前10名的成绩……卷死……</li>
                <li>2. 学会用Python制作一些程序</li>
            </ul>
        </div>
        <div class="footer">
            <p>感谢大家的观看~</p>
            <div class="copyright">
                &copy; 2024 王曦. wang. 保留所有权利.
            </div>
        </div>
    </div>
    <script>
        window.onload = function() {
            const cards = document.querySelectorAll('.card');
            cards.forEach((card, index) => {
                setTimeout(() => {
                    card.style.opacity = '0';
                    card.style.transform = 'translateY(20px)';
                    card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
                    
                    setTimeout(() => {
                        card.style.opacity = '1';
                        card.style.transform = 'translateY(0)';
                    }, 50);
                }, index * 200);
            });
            const tags = document.querySelectorAll('.tag');
            tags.forEach(tag => {
                /*tag.addEventListener('click', function() {
                    alert(`我超喜欢${this.textContent}！`);
                });*/
            });
        };
    </script>
</body>
</html>